добро пожаловать обратно в "Web Dev Simplified (Упрощённая Веб-разработка)" меня
зовут Кайл, и вы можете себе представить, когда
Вы используете Интернет почти каждый
веб-сайт, который вы используете, имеет некоторую форму
журнал и компонент к нему, где у вас есть
учетная запись пользователя вы можете войти выйти и т. д.
и я держу пари, что проект, который вы
думать о работе также имеет, что
точно такой же компонент входа в систему, так что в сегодняшнем
видео, которое я собираюсь показать вам
шаблонный шаблон для настройки
Ваша собственная система входа в систему
ваше приложение
давайте начнем сейчас Прежде чем мы прыгнем
в кодировании позвольте мне показать вам
абсолютно красивый сайт
что мы собираемся встроить в это видео
ну, может быть, не так красиво, что мы имеем
вот экран входа в систему, мы можем нажать
зарегистрируйтесь и перейдите на наш экран регистрации
и скажем, что мы регистрируем пользователя
здесь просто очень простой пользовательский клик
зарегистрируйтесь, это приведет нас к нашему логину
страницы, а затем, если мы хотим войти, давайте
скажем, мы выбрали адрес электронной почты, который не
существует, и мы собираемся выбрать пароль
и мы нажимаем логин, он скажет нам, что
пользователь с электронной почтой не существует
и если мы действительно войдем в систему с правильным
адрес электронной почты, но неправильный пароль
нам наши пароли неверны и наконец
если мы введем в тот же адрес электронной почты и
тот же пароль и нажмите Войти это
собирается привести нас к отображению страницы
наше имя и дайте нам кнопку выхода
также, если вы перенаправляете на эту страницу входа
это на самом деле собирается прочитать вашу бывшую
на эту домашнюю страницу, потому что мы уже
вошли в систему, как только мы нажмем выйти
хотя это вернет нас к логину
и если мы попытаемся перейти на эту домашнюю страницу
не позволит нам, сестры, перенаправить
мы вернулись на страницу входа, так что теперь мы
знать, что мы строим, давайте запустим
Visual Studio код, и мы просто собираемся
иметь полностью пустой проект
начать, потому что это лучшее
способ сделать вещи и первое, что мы
нужно сделать, это инициализировать наш проект
так как мы собираемся использовать NPM для
хранить все наши зависимости мы можем
просто введите NPM, и мы можем просто
использовать значения по умолчанию, чтобы мы могли нажать
введите кучу раз и здесь мы идем
это даст нам package.json
где мы будем хранить все
наших зависимостей и начать
Я только собираюсь установить
зависимости мы собираемся получить
основное приложение работает, а затем
мы установим Pendency Zazz мы бежим
в необходимости их позже, чтобы мы могли
введите npm я и это позволит
мы начинаем устанавливать зависимости и
первая зависимость нам нужна называется
Экспресс это будет наше приложение
сервер и следующая зависимость нам нужна
это EJS, и это будет наш шаблон
язык для всех разными взглядами такими
как войти в систему зарегистрироваться и т. д. мы также собираемся
нужно несколько зависимостей развития
так что мы можем набрать в нпм я - - сохранить Dev
только пользователь таблицы для разработки только
и мы хотим
нет дамана, а также точка env и узел
Мент собирается позволить нам перезагрузить
наш сервер автоматически каждый раз, когда мы
внести изменения и точка env просто позволит
нам иметь переменные среды, которые мы
может хранить его внутри файла точка env
что мы можем загрузить на наш сервер так
давайте создадим этот файл EMV сейчас просто позвоните
это env, и это где наш
переменные среды пойдут, и мы
Также хочу создать здесь точку получить
игнорировать, потому что мы на самом деле хотим
игнорировать эти файлы, которые мы не хотим
совершить нашу env, и мы также не хотим
зафиксируйте наши модули узлов в нашем git
хранилище и это потому, что узел
модули просто все наши установлены
зависимости и env могут содержать
секретная конфиденциальная информация, которую мы не делаем
хочу поделиться этим миром самым последним
вещь, которую нам нужно сделать, это на самом деле установить
до нашего package.json, чтобы мы могли начать
наш сервер внутри этого раздела скрипта
давайте просто создадим скрипт с именем dev
начать и внутри вот что мы
собираюсь сделать, мы просто собираемся бежать
узел Mon и мы будем запускать сервер GS
который является файлом сервера, который мы собираемся
создавать сейчас мы можем сохранить, что создать
этот файл сервера
извините ojs и теперь внутри консоли, если
мы запустили узел Mon Whoops не узел Mon
если мы запустим NPM, запустим, как
что это будет запускать этот скрипт
что мы только что создали здесь этого мертвого
запустить сценарий и каждый раз, когда мы
внести изменения в наш сервер, ревностно это
собирается обновить наш сервер и перезапустить
весь наш код, чтобы начать очень
Первое, что мы хотим сделать, это просто настроить
наше основное приложение Express, так что давайте
Экспресс-импорт, мы можем сделать это, просто используя
выразительная переменная, мы можем просто сказать,
требуется экспресс, который собирается принести в
Экспресс, и мы также хотим получить приложение
переменная из Express, поэтому мы можем просто сказать,
вызвать функцию Express здесь, и если мы
спустись сюда и набери в приложении точку
слушать и дать ему порт у нас теперь есть
приложение работает на порту 3000, когда мы
сохранить что мы идем на localhost 3000 вы
можно увидеть, что мы не можем получить косую черту и
это потому, что у нас нет настроенного маршрута
для нашего приложения, поэтому первое
мы должны сделать, это настроить маршрут, который мы можем
просто скажи apt-get slash это будет
быть нашей домашней страницей маршрут, который вам понадобится
войти в систему для доступа и вместо
отсюда мы просто получаем функцию, которая имеет
переменная запроса и ответ
переменная и все, что мы хотим сделать, это
на самом деле отправить им определенную страницу, которая
мы собираемся создать, чтобы мы могли просто сказать,
ответная точка рендеринга и внутри здесь
мы хотим визуализировать файл, который мы собираемся
называть этот индекс EJS, и мы можем сказать, что
и сейчас у нас нет файлов
будучи оказанным
для того, чтобы получить то, что мы работаем
нужно сделать, это создать папку с именем
взгляды и внутри здесь нам нужно
создать этот индекс просмотра ejs и сейчас
вместо этого давайте просто положить некоторый код
мы будем ставить h1 возгласы h1 и внутри
это мы просто собираемся сказать привет так же, как
это сохранить, и теперь, когда мы обновляем
это вы видите, что мы получаем скрыть отправку
на сервер сейчас, чтобы использовать
Синтаксис EGS нам нужно сообщить нашему серверу
что мы используем EJS так внутри отсюда
мы можем сказать, точка набора приложений и что мы хотим
чтобы сделать, мы хотим установить двигатель представления
так же, как это мы можем сказать, введите
посмотреть двигатель, и мы хотим установить это здесь
к EJS, и именно поэтому мы установили, что
EJS зависимость раньше, потому что теперь наш
Просмотр двигателя установлен на EJS, и мы можем
на самом деле использовать EGS в нашем шаблоне так для
Пример, скажем, что мы хотим передать
пользователь вниз, мы можем просто сказать, что пользователь должен
просто сказать, что мы хотим передать имя и
мы можем просто дать имя Кайлу для
пример в качестве основного примера и внутри
здесь мы можем просто поставить это имя
положить его внутри этого меньше, чем с
процент и знак равенства это роскошь
вывести переменную, и мы могли бы просто
сделать имя сейчас, если мы сохраним это и мы
освежитесь здесь, вы увидите нас как привет
Кайл теперь, когда у нас супер просто
Настройка сервера давайте создадим
маршруты нам нужны для нашей страницы входа и
наша страница регистрации сначала мы создадим
взгляды для них мы будем называть это логин dgs
и мы также создадим представление здесь позвоните
регистр EJS это были бы наши два
разные страницы, а затем внутри нашего
Сервер мы собираемся создать маршруты для
оба из тех, поэтому мы можем просто использовать получить
маршруты снова
так как мы просто хотим получить их через
URL первым будет логин
и снова он возьмет запрос и
ответ, а не здесь, что мы
хотите сделать, вы просто хотите скопировать это
код здесь для рендеринга, но вместо
мы хотим сделать наш логин dgs и мы
не нужно беспокоиться о прохождении
дополнительная информация к нему, так вот наш
войдите и мы можем сделать то же самое
вещь для регистрации, за исключением того, что мы
собираюсь изменить наш маршрут, чтобы зарегистрироваться
и мы хотим убедиться, что мы делаем
зарегистрированный файл EJS, который находится внутри
из нашей папки просмотров сейчас, если мы сохраним это
и вместо этого мы просто помещаем текст
войдите и здесь мы помещаем текст
зарегистрироваться убедитесь, что мы сохраним оба
и если мы перейдем к слэш-логину, вы увидите
это говорит логин и если мы пойдем к слэшу
зарегистрируйтесь, вы увидите, это говорит, зарегистрируйтесь сейчас
что мы знаем, что наши страницы отображаются
давайте создадим фактический HTML внутри
их для рендера в наших формах будет
зарегистрироваться первым и первым делом мы
хочу сделать, мы хотим иметь H1 и
внутри отсюда мы просто собираемся
но текстовый регистр, поэтому мы знаем, что
мы на нашей странице регистрации, а затем
после этого у нас будет форма
который будет содержать все наши
разные входы убедитесь, что мы закрываем
и внутри этой формы мы собираемся
иметь действие упс действие и это
действие здесь будет слэш
зарегистрироваться, и мы хотим убедиться, что
мы меняем метод здесь, чтобы быть постом и
это означает, что мы собираемся опубликовать на
маршрут с именем слеш регистр
внутри нашего сервера, так что давайте создадим
что прямо сейчас мы сделаем это прямо здесь
после нашего apt-get и этот собирается
быть приложением точка пост, и это будет
быть тем же путем регистрации и снова
это будет иметь запрос и
переменная ответа внутри этого
функция, и мы просто реализуем это
позже пока мы будем работать над
убедившись, что наш HTML в реестре
что EJS завершен первое, что мы
нужно сделать, мы должны иметь ряд так
мы просто будем использовать div для этого и
этот ряд на самом деле будет содержать
вся наша информация для нашего логина и
для имени, поэтому мы будем здесь
ввод или метка в первую очередь и как метка
будет для нашего элемента имени, и мы
хочу убедиться, что мы просто пометить это как
название убедитесь, что вы закрыли этот ярлык
Затем мы можем реально создать вход
который будет для этого имени это
собирается иметь тип здесь упс
который будет текст, который мы хотим
убедитесь, что мы даем ему идентификатор, который является
так же, как четыре, так что это будет
по имени и мы также хотим дать ему имя
вот как мы будем получать доступ к нему на
сервер, и это будет просто по имени
наконец, мы хотим убедиться, что это
требуется, поэтому мы используем необходимые
атрибут теперь давайте сохраним это обновление
наша страница, и вы увидите, у нас есть наше имя
вход прямо здесь, давайте скопировать это вниз
потому что нам понадобится еще несколько
входы мы собираемся иметь наш первый
вход, который будет электронной почтой так
мы просто все изменим
здесь к типу электронной почты будет
по электронной почте упс, мы хотим убедиться,
идентификатор электронной почты, поэтому он соответствует этому для
и, наконец, имя электронной почты и вниз
здесь мы собираемся сделать то же самое, но
мы собираемся сделать это для пароля, чтобы сделать
уверен, что мы изменим весь наш старый текст, чтобы быть
тип пароля - пароль
и, конечно, зовут пароль сохранить, что
и обновить, и вы видите, теперь у нас есть
Назовите нашу электронную почту и наш пароль
установить последнее, что нам нужно сделать, это
на самом деле, чтобы создать кнопку для отправки
наша форма, поэтому мы просто создадим кнопку
с типом отправки и вместо
здесь мы можем просто вставить текст
зарегистрируйтесь сейчас мы сохраняем это обновление мы
есть все наши элементы формы для
регистрация нашей страницы последняя вещь
мы будем хотеть сделать это на самом деле
добавить тег привязки, который будет просто
свяжите нас с нашей страницей входа, чтобы мы
просто есть ссылка
который собирается перейти в / логин и мы
просто хочу поставить текст логин сейчас
если мы обновим и нажмем логин, вы увидите
мы вернулись на нашу страницу входа
и наша страница входа будет почти
точно так же, как зарегистрироваться, так что давайте
скопируйте это вставьте сюда вместо
мы хотим поставить здесь логин
и мы хотим убедиться, что наш
перейти на нашу страницу регистрации с текстом
зарегистрироваться и, конечно, мы хотим
публиковать на нашем маршруте входа вместо
наш регистр маршрута и последнее, что
мы можем удалить это имя, и мы можем
изменить этот регистр текст здесь, чтобы сказать
войдите и теперь, если мы обновим это, вы видите
мы получаем страницу входа в качестве электронной почты
пароль кнопку входа, и мы можем пойти
вернуться на страницу регистрации или вернуться к
страница авторизации
мы действительно можем измениться в зависимости от того, что
тот, который мы хотим быть теперь, когда у нас есть
наши страницы завершены, давайте вернемся в
наш сервер и на самом деле реализовать эти
методы сообщения сначала мы хотим создать
отправить сообщение для входа в систему, это просто
будет отправлять в слэш логин и
мы также, так как мы собираемся получать
информация из форм, что нам нужно
сделать, это подойти сюда, и нам действительно нужно
сказать приложение использовать, и мы должны сказать это
что мы хотим использовать Express этот URL
закодированы, и мы хотим убедиться, что мы передаем
это вариант расширенного мы хотим поставить
это как ложь по сути все, что это
делает это говорит о нашем приложении
то, что мы хотим сделать, это взять эти
формы из нашей электронной почты и пароля, и мы
хочу иметь возможность получить доступ к ним внутри
наша переменная запроса внутри нашего поста
метод так внутри поста здесь для нашего
зарегистрироваться, мы могли бы сказать, запросить это имя
К сожалению, тело запроса это имя и
будет соответствовать этому полю имени
прямо здесь можно сделать то же самое для
электронная почта и, конечно, наконец, то же самое
вещь для пароля и что мы ставим после
Тело здесь соответствует именно этому
поле имени, так что имя имя имя электронной почты
имя это пароль независимо от этого имени
поле соответствует тому, что мы собираемся
использовать после тела, чтобы получить к нему доступ, теперь мы
собираюсь использовать вместо того, чтобы использовать
База данных для хранения наших пользователей, мы просто
собираюсь хранить их в локальной переменной
внутри нашего сервера, так что давайте создадим
Переменная здесь мы просто будем говорить
Const пользователи будут равны
пустой массив теперь это то, что вы
никогда не хотел бы делать в производстве, но
гораздо проще использовать только местный
переменная, в отличие от подключения к
Вся база данных, особенно потому что это
учебник ориентирован только на
часть аутентификации и входа в систему, а не
о том, как подключиться к базе данных, если вы
хочу узнать, как подключиться к
База данных в приложении у меня есть
Весь полный курс стека на YouTube для
node.js и MongoDB
Вы можете проверить, я свяжу это в
карты и описание ниже, так
Теперь здесь, внутри нашего тела, мы также
нужно создать хеш пароля нашего пользователя
и для этого мы будем использовать
то, что называется bcrypt, который является
библиотека, которую мы хотим установить так вниз
здесь внутри нашего терминала мы могли
просто нажмите +, чтобы открыть новый турнир
введите в NPM я bcrypt и bcrypt собирается
чтобы позволить нам хешировать пароли, а также
сравнить хешированные пароли, чтобы убедиться,
что наше приложение полностью безопасно
как только это будет сделано загрузка, мы можем прийти
до вершины здесь, и мы можем на самом деле
включить это, чтобы мы могли сказать, Const расшифровать
будет равен требовать только
так и мы хотим убедиться, что мы
требует bcrypt
видео теперь у нас фактически есть доступ к
эта переменная, давайте удостоверимся, что мы вернемся
к нашей другой консоли, которая имеет наш фактический
приложение работает на нем и вместо
вот что мы хотим сделать, мы хотим
создать нового пользователя с правильным
хешировал пароль, чтобы сделать это, мы
собираюсь использовать блок try-catch, потому что
мы на самом деле используем асинхронный код
и что мы хотим сделать, мы хотим
убедитесь, что это асинхронная функция, так
что мы можем использовать trycatch внутри него
и что мы хотим сделать, мы хотим
сделать хешированный пароль, чтобы мы могли создать
вызов переменной это хешированный пароль и
это будет равно bcrypt
точка хэш, и мы хотим сделать, мы хотим
передать его в пароле, который является запросом
пароль тела, и мы также хотим
передать это, сколько раз, что мы хотели
генерировать по существу, что хэш
безопасно мы хотим, чтобы это было, и мы
собираюсь использовать значение 10, которое просто
хорошее стандартное значение по умолчанию, которое
собираюсь сделать это довольно быстро, но и
довольно безопасно, и мы должны убедиться,
что мы на самом деле ждем этого, потому что это
асинхронный, поэтому он собирается вернуться
после ожидания, так что теперь у нас есть
фактический хешированный пароль, который мы можем
хранить в нашей базе данных, и если вы хотите
более подробная информация о безопасности
для аутентификации с хэшированием
пароли у меня есть целое видео, которое
Я также буду ссылаться на карты в
описание, которое идет просто
аутентификация и хеширование паролей
используя bcrypt внутри nodejs, что теперь
мы можем сделать здесь у нас есть, что
переменная пользователей мы можем просто нажать новый
пользователь к нему, и этот пользователь будет первым
есть идентификатор, который мы можем однозначно идентифицировать
это так, поэтому мы просто будем использовать дату сейчас
Строка это будет уникальным
идентификатор для нас снова, если у вас был
База данных это будет автоматически
генерируется так что вам не придется беспокоиться
об этом материале
Далее мы хотим получить имя от
запрос, поэтому мы скажем, точка тела запроса
имя, которое мы хотим получить по электронной почте
электронная почта, которая является запросом
основной адрес электронной почты и, наконец, этот пароль
вместо тела запроса точка - слово
мы хотим использовать этот хешированный пароль
прямо здесь, потому что это на самом деле безопасно
хранить в нашей базе данных сейчас, если все
это было успешно, мы хотим перенаправить
пользователь вернулся на страницу входа, поэтому мы
Можно сказать, ответ ой точка перенаправления
и мы хотим перенаправить их на косую черту
войти, чтобы они могли войти с
аккаунт они только что зарегистрировались, но если для
по какой-то причине у нас был сбой, мы просто
хочу перенаправить их обратно на
зарегистрировать страницу здесь, чтобы перенаправить на
зарегистрируйтесь и мы сможем убрать этот призрак
линия здесь, и это весь наш
приложение для регистрации пользователей сейчас, если
Я говорю это, и внизу здесь мы
просто поставьте консольный журнал для наших пользователей
так что мы можем увидеть, если мы добавили пользователя, мы можем
иди сюда, введите имя, которое мы будем использовать ш
WAW и пароль W, если мы нажмем
зарегистрироваться вы увидите здесь, в
консоль мы распечатаем удостоверение личности, которое
это просто текущая отметка времени у нас есть
имя W электронная почта wo W, и это хэшируется
пароль, который абсолютно безопасен для нас
хранить в нашей базе данных теперь одно
Отметим, что каждый раз, когда мы сохраняем наши
приложение и перезагружает эту переменную
пользователи собираются получить сброс на пустой
массив, поэтому мы просто должны убедиться, что
помните об этом, и каждый раз, когда мы делаем
изменить нам просто нужно повторно добавить нашего пользователя
и это чисто потому, что мы не
используя базу данных, как я уже говорил ранее, это
просто в памяти это что-то
опять же, вы бы не хотели делать в
производственное приложение теперь, когда у нас есть
наша функциональность регистра сделана следующая
вещь для работы это логин и фактическая
акт проверки, чтобы убедиться, что пользователи
имя и адрес электронной почты и пароль совпадают
не слишком сложно, но на самом деле
сохранить этот пользователь во всех ваших
разные запросы это становится немного
участвует, поэтому мы будем использовать действительно
удобная библиотека под названием паспорт
который используется почти всеми для
аутентификация, так что давайте перейдем к
наш другой терминал, где мы можем на самом деле
установить это и что мы хотим сделать, это
мы просто хотим ввести NPM I и мы
хочу установить паспорт, а также
паспорт местный и местный вариант
по сути позволяет нам использовать имена пользователей
и пароли для входа в пароль
имеет паспорт имеет кучу разных
способы входа в систему через
Google Facebook локальный пароль, электронная почта и т. Д.
поэтому мы просто хотим использовать локальную версию
но опять же, если вы хотите поэкспериментировать
с другими версиями не стесняйтесь также в
чтобы сохранить и сохранить нашего пользователя
на разных страницах нам нужно использовать
что называется сессия, поэтому мы собираемся
установить экспресс
сеанс, а также для отображения сообщений
ибо если мы не сможем войти, мы собираемся
установить что-то под названием Express Flash
который используется по паспорту внутри
внутренности, чтобы показать те хорошие удобные
сообщения о неправильной почте неправильный пароль
и т.д., так что после этого заканчивается установка
там мы идем, мы можем на самом деле настроить наш
паспорт будет работать с нашим логином
и в то время как мы могли бы положить все это
информация в файл нашего сервера здесь
это быстро собирается стать довольно большим
и раздутый, так что я люблю делать это
на самом деле создать отдельный файл и
мы просто будем называть это здесь
Конфигурация паспорта J / S и здесь мы
собираюсь поставить все наши разные
информация, связанная с паспортом, и мы
собираюсь делать все это внутри функции
который мы собираемся просто позвонить
инициализировать там мы идем и внутри
эту функцию мы собираемся инициализировать
наш паспорт, который мы собираемся сделать
уверен, что мы переходим к нашей инициализации
функционировать, а затем внутри нашего сервера
что мы хотим сделать, мы на самом деле хотим
требовать, чтобы мы могли просто спуститься
здесь, и мы можем потребовать эту функцию
мы просто назовем это здесь инициализировать
паспорт ой, и это будет
равно равно требуется и мы хотим
чтобы убедиться, что мы требуем здесь наши
Конфигурация паспорта, а затем мы можем просто
вызвать эту функцию и Ниша Шейлы
паспорт, и мы разместим его в нашем
переменная паспорта, которую мы можем просто получить
с помощью Const Whoops Const паспорт
равен требованию паспорта, который является
только та библиотека, которую мы только что установили
мы вызываем эту функцию
инициализировать паспорт вместо нашего
настроить паспорт и мы можем сделать все
наша конфигурация для паспорта внутри
этот единственный файл и использовать этот локальный
версия паспорта, что мы хотим сделать
собирается подойти сюда, мы хотим создать
переменная, которую мы просто будем называть местным
стратегия
Увы стратегии там мы идем, мы идем
установить это равным, чтобы требовать паспорт
местный, и мы просто хотим получить
Стратегия от того, чтобы мы могли просто сказать,
Точечная стратегия это будет нашим
местная стратегия, и тогда мы можем спуститься
здесь и говорят, что использование паспорта и мы
на самом деле хотите использовать эту местную стратегию
так что мы можем просто сказать новую местную стратегию
и внутри здесь это займет
Варианты первый вариант, который мы хотим
пройти мы хотим передать имя пользователя
поле, и это, по сути, говорит о том, что
наш культ имени пользователя по умолчанию это происходит
быть именем пользователя, но в нашем примере мы
позвонив по этому адресу, так что здесь мы просто хотим
поставить электронное письмо, и вы также можете передать
поле пароля, но по умолчанию
пароль
в нашем приложении мы уже называем
паспорт или пароль, поэтому мы отлично
хорошо, то следующее, что нам нужно
мы действительно должны пройти секунду
переменная здесь, которая будет
функция, которую это собирается вызвать
аутентифицировать нашего пользователя, поэтому мы просто
создать функцию здесь мы просто собираемся
называть это
аутентифицировать пользователя
там мы идем, и мы собираемся пройти в
это имя функции, которая будет создавать
здесь в качестве функции под названием authenticate
пользователь и на самом деле, чтобы сделать это проще
сами мы на самом деле собираемся поставить
эта удивительная функция пользователя билета внутри
нашей функции инициализации мы просто
сделать функцию стрелки, и это
аутентифицировать пользовательскую функцию собирается
принять несколько разных параметров
Первый параметр это будет принимать в
будет электронная почта в нашем случае
это поле имени пользователя на следующий
вещь будет нашим паролем и
наконец, это по существу сделанная функция
мы будем называть это всякий раз, когда мы
завершили аутентификацию нашего пользователя, так что теперь
мы сделали это у нас есть паспорт
использовать настройку следующее, что нам нужно сделать
установлен паспорт для сериализации нашего
пользователь, поэтому мы можем просто прийти сюда
сериализовать пользователя и внутри здесь мы
собираюсь взять функцию, которая собирается
взять пользователя, и он собирается взять его
сделано, и это собирается сериализовать наш
пользователь хранить внутри сеанса и
нам нужно иметь функцию, которая
собираюсь сделать полную противоположность
десериализация нашего пользователя, и это снова
собираюсь взять здесь удостоверение личности и сделал
потому что мы собираемся сериализовать наши
пользователь как один идентификатор, а затем давайте работать
на нашей функции аутентификации пользователя
потому что это по сути то, что мы
будем звонить с нашего логина используя наш
пароль электронной почты, чтобы убедиться, что наш пользователь
исправить так, первое, что мы хотим сделать
получить нашего пользователя по электронной почте, чтобы мы могли просто
создать пользователя здесь, и мы просто собираемся
сказать, что это будет получить пользователь
по электронной почте, и мы собираемся передать в
по электронной почте это функция, которую мы
собираюсь создать, но мы не должны
беспокоиться об этом сейчас мы просто знаем
что это собирается вернуть нам пользователя
по электронной почте или мы собираемся вернуть ноль
если для этого пользователя нет электронной почты, поэтому мы
хочу проверить, чтобы убедиться, что мы
на самом деле есть пользователь, поэтому мы можем сказать, если
наш пользователь нулевой, то мы по какой-то причине
не может найти пользователя, и мы хотим
вернуться, чтобы мы могли просто сказать, возвращение сделано
какую именно функцию нам нужно было вызвать
каждый раз, когда мы закончили и первый
Параметр является ошибкой в ​​нашем случае мы
нет ошибки, потому что ошибка
было бы, если что-то пошло не так на вашем
сервер и в нашем случае ошибки нет
на сервере следующее, что нам нужно
сделать, мы должны вернуть пользователя, которого мы
нашел в нашем случае мы не нашли пользователя так
мы вернем false и мы также можем
возвращение
сообщение, которое будет отображаться это
по сути, наше сообщение об ошибке мы можем
просто скажите, что нет пользователя с этим адресом электронной почты там
мы идем и теперь, когда мы знаем, если мы получим
мимо этого заявления если мы на самом деле
есть пользователь, что мы можем сделать, мы можем
на самом деле пытаются убедиться, что пользователи
пароль соответствует этому паролю
прошел здесь и сделать это, мы
понадобится расшифровать, поэтому давайте удостоверимся
мы принимаем в расшифровке с использованием требуют
заявление ой
требовать, и мы хотим требовать, чтобы
библиотека bcrypt просто так, а затем
здесь это снова асинхронный так
мы собираемся обернуть это внутри
попробуй поймай и внутри попробуй порцию
эта попытка поймать то, что мы хотим сделать, это мы
хочу убедиться, что мы проверяем
в ожидании нашего bcrypt точка сравнения и
Первое, что мы хотим, чтобы пароль
пароль, который пользователь отправил с
Форма входа, которая является этот пароль, и мы
хочу сравнить это с нашей точкой пользователя
пароль так же, как этот ой пароль
и если это возвращение верно и что
означает, что у нас на самом деле есть
аутентифицированный пользователь, так что все
вернулся успешно, но если это было сделано
не вернуть истину, то это означает, что наш
пароль пользователя не совпадает, поэтому давайте сделаем
плохой случай сначала мы вернемся
сделано без ошибок и мы хотим вернуть
ложь здесь, потому что у нас нет пользователя
опять пароли не совпадают и мы
также хочу вернуть сообщение здесь и
супруги по сути собирается
скажем пароль неверный просто так
и если мы по какой-то причине нашли
пользователь наши пароли верны, мы хотим
вернуться сделано снова без ошибок, но
на этот раз мы собираемся вернуть пользователя
что мы хотим на самом деле подтвердить подлинность
с этим пользователь, который у них есть
на самом деле вошли как и, наконец, внутри
нашего ловца давайте поймать эту ошибку
и мы не вернемся здесь, но мы
не вернет эту ошибку внутри нашего
Готовый оператор как наш первый параметр
потому что у нас действительно была ошибка с
наше приложение, так что теперь единственное, что мы
осталось это получить пользователя по электронной почте мы
нужно убедиться, что мы передаем это так
мы собираемся передать это в наш
инициализировать функцию здесь, и нам нужно
убедитесь, что мы на самом деле
экспортировать эту функцию, поэтому мы собираемся сохранить
Модули точка экспорта или извините модуль
точка экспорта будет равна этому
инициализированная функция это просто так, мы
может вызвать эту функцию, требуя в
наш паспорт, который мы создали здесь
так что обратно на наш сервер вместо нашего
паспорт мы на самом деле хотим передать в
эта функция собирается взять в
по электронной почте так по электронной почте и внутри вот что
мы собираемся сделать, мы просто
скажем, пользователи находят точки, и мы хотим найти
где наш пользователь точка электронной почты равна
электронная почта, которую мы передали, и мы хотим
убедитесь, что мы вернем это и
сделать это еще проще читать давайте сделаем
уверен, что мы ставим все это по-разному
так же, как это мы можем на самом деле положить это
все в одну линию здесь мы
идти
удалить кучу этих дополнительных
скобки и там мы идем, это наш
функция для поиска пользователя на основе
адрес электронной почты, и это наш паспорт, который
мы настраиваем теперь, когда у нас есть
Паспорт настроен, что нам нужно сделать
мы действительно должны работать над вами
куча операторов по существу так
что наш сервер знает, как использовать
паспорт первое, что мы хотим
сделать это приложение точка использования и этот
будет для вспышки, которую мы не имеем
на самом деле требуется еще, поэтому давайте удостоверимся
мы требуем, что мы собираемся сказать Const
Столкновение будет равно требовать
Упс здесь у нас есть Экспресс Flash мы
также нужно сделать то же самое для
сессия это только библиотеки
что мы установили раньше, а теперь вниз
здесь с нашим приложением точка использования у нас есть вспышка
как наш первый следующий нам нужно
использовать сессию и сессию на самом деле
принимает кучу разных вариантов
Первый секрет это
по сути, ключ, который мы хотим сохранить
секрет, который собирается зашифровать все
наша информация для нас, и мы собираемся
чтобы получить это из нашей среды
переменные, поэтому мы будем говорить, обрабатывать точку NV
сессия к сожалению сессия подчеркивать секрет
это будет просто название нашего
секретный ключ, который мы собираемся положить внутрь
нашего файла MV, поэтому мы будем говорить сессию
подчеркнуть секрет, и вы можете установить это
к тому, что вы хотите в нашем случае мы
просто установите его в секрет, используемый для большинства
скорее всего, хотите сгенерировать это как случайный
строка символов, так что это больше
обеспечить более длинный и более случайный
тем более безопасным он теперь будет внутри
нашего сервера здесь нам действительно нужно
загрузить в наших переменных среды так
мы сделаем это на самом верху нашего
приложение, которое мы можем просто сказать, если наш
процесс env узла E & V; не равно
производство по сути это означает, что
мы находимся в разработке, мы хотим требовать
эта тенденция развития точка env и
мы хотим вызвать точечный конфиг, это происходит
загрузить во всех наших разных
переменные среды и установить их
внутри процесса env сейчас с этим
как у нас есть еще несколько свойств
что нам нужно установить первый
Resave мы хотим установить это в ложь
по сути, это говорит, что мы должны сохранить
наши переменные сеанса, если ничего не имеет
изменилось в нашем случае мы не хотим
восстановить его, если
изменилось и, наконец, мы сохранили
неинициализированный который снова мы хотим быть
ложно и, по сути, это говорит, что делать
Вы хотите сохранить пустое значение в
сессия, если нет значения, и мы
на самом деле не хочу делать это сейчас с
вспышка и сессия из того, что мы можем
установить паспорт, чтобы мы могли сказать, что приложение
Вы используете инициализацию паспорта это просто
функция внутри паспорта, которая
собираюсь настроить некоторые основы для
нас и так как мы хотим хранить наши
переменные, которые будут сохраняться через
Весь сеанс нашего пользователя мы хотим
использовать сеанс паспорта, который собирается
работать с нашим приложением точка использования сессии до
здесь и что со всем этим, наконец, из
как мы можем спуститься на наш пост
для нашего логина, и мы на самом деле даже не
нужна эта функция, потому что мы просто
собираюсь использовать паспортную аутентификацию
промежуточное программное обеспечение, чтобы мы могли сказать, паспорт точка
аутентифицироваться и мы хотим использовать
местная стратегия и что мы хотим сделать, это
передать список вариантов вещей
что мы хотим изменить первый
будет где мы идем, если есть
успех, так что наш успех перенаправление идет
перейти на нашу домашнюю страницу, которая просто
урезать здесь и по какой-то причине, если
есть сбой, где мы хотим
перенаправить и мы хотим перенаправить их
вернуться к логину, и мы также хотим
убедитесь, что мы показываем сообщение так
мы установим сбой вспышки в истину, это
просто собираюсь дать нам вспышку
сообщение, которое мы можем отобразить пользователю
который будет равен нашему
сообщения здесь, так что нет пользователя с этим
адрес электронной почты или пароль и исправить в зависимости
на что ошибка в том, что они получают и
Теперь для того, чтобы отобразить эту ошибку
сообщение нам нужно зайти в наш логин dgs
и нам нужно использовать наши EGS здесь для того, чтобы
на самом деле сначала есть утверждение if
и мы хотим проверить, если сообщения точка
ошибка и это просто по существу
говоря, что у нас есть сообщение об ошибке и
способ, которым этот воздух сообщений установлен
это вспышка собирается установить сообщения
переменная для всех наших различных вспышек
сообщения сообщения и паспорт идет
установить здесь сообщение об ошибке, которое
будет любая ошибка, которую мы получаем
например здесь ни один пользователь с этим
неверное имя или пароль
быть, какая ошибка установлена, так что если у нас есть
ошибка устанавливается мы хотим сделать, мы
просто хочу сделать это, чтобы мы могли просто
говорят местные жители получили сообщения точка ошибка
на самом деле нам даже не нужны местные жители
мы можем просто повернуть вашу ставку, это просто
сообщения точка воздуха убедитесь, что мы закрываем
выкл и, конечно, мы также должны сделать
уверен, что мы закрываем наши фигурные скобки
вот так теперь мы на самом деле собираемся
показать наше сообщение, если у нас есть один и
если мы сохраним обновление вы можете увидеть, что
мы получаем ошибку, так что давайте пройдемся
к нашему приложению здесь посмотрим, что наши
ошибка
если мы прокручиваем вверх, вы сидите и говорите, что
у нас есть ошибка здесь, в строке 12 это
говоря, что не может понять, что
bcrypt и это на самом деле, потому что это
не могу понять вес, потому что мы
нужно иметь асинхронную функцию
вот так теперь, если мы говорим, что прокрутите назад
вниз
вы видите, мы получаем ту же ошибку
сообщение, потому что я поставил раковину в
неправильное место именно этот аутентифицированный пользователь
это должно быть асинхронным, и теперь, если
Вы экономите, что вы видите, мы получаем
Последняя ошибка здесь мы просто говорим, что
местная стратегия требует проверенного
обратный вызов и упс на самом деле не идут
там и если мы прокрутим вниз, где
мы определяем нашу местную стратегию вы
видим, что мы на самом деле не передаем
аутентифицированный пользователь нашей локальной стратегии
мы передаем его для использования в паспорте, так
давайте удостоверимся, что мы правильно
прохождение аутентификации пользователя к нашему новому
местная стратегия а не паспорт
использовать сейчас давайте сохраним эту прокрутку вниз вы
можно увидеть, что у нас нет ошибок или
приложение, чтобы мы могли обновить здесь
и наша страница входа работает, давайте попробуем
зарегистрироваться у пользователя будет просто W
W на W и W и теперь, если мы попытаемся войти
со случайным электронным письмом и случайным
пароль мы могли бы войти в систему, если мы
убедитесь, что это электронное письмо, и вы будете
увидеть это нет пользователя с таким адресом электронной почты
Теперь мы выберем правильный адрес электронной почты и
неверный пароль и мы получим пароль
неправильно и теперь, наконец, если мы используем
правильный адрес электронной почты и правильный пароль
нажмите на логин и увидите, что он загружается
на некоторое время, и это, вероятно, потому что
у нас есть ошибка, и мы действительно имеем
ошибка, которую мы на самом деле не реализуем
наш пользователь сериализации или наша десериализация
пользовательские функции еще так давайте сделаем это
вместо нашего пользователя сериализации все мы
нужно сделать, это сериализовать нашего пользователя, чтобы мы
можно просто сказать идентификатор пользователя, который мы просто хотим получить
идентификатор пользователя и сохранить его в нашем
сессия, и мы должны убедиться, что мы передаем
это для готовой функции нуль для
наша ошибка и здесь идентификатор пользователя является
актуальная сериализированная версия нашего пользователя
Далее нам нужно сделать почти то же самое
вещь для нашего десериализации, но вместо
вот что мы хотим сделать, мы на самом деле
хочу получить пользователя так, что мы собираемся
сделать, это обернуть это на отдельной строке
так что вам будет легче читать
и мы хотим, чтобы наш пользователь по идентификатору так
мы просто скажем, получить пользователя по идентификатору, и мы
собираюсь передать это в удостоверение личности прямо здесь, что
мы получаем, и мы хотим убедиться,
что мы возвращаем это, и это получить пользователя по
ID это то, что нам нужно, чтобы убедиться, что мы
пройти здесь, так что давайте перейдем в этом
получить пользователя по идентификатору перейти на наш сервер прокрутки
до того, где мы определили, что только право
здесь и мы собираемся определить
функция, которая принимает идентификатор, и мы
собирается получить пользователя по этому идентификатору и
там собирается
почти так же, как наша электронная почта
функция, но вместо сравнения электронных писем
мы будем сравнивать идентификаторы так же, как
это теперь мы можем на самом деле проверить, что мы
можете зайти в нашу электронную почту или зарегистрироваться
уверен, что мы зарегистрируем этого пользователя теперь мы можем
введите адрес электронной почты правильно и
пароль нажмите логин
и вы увидите, что он перенаправляет нас обратно
эта идеальная страница для нашего индекса где
мы хотим войти, если у нас есть
аутентифицированный пользователь и лучшая часть
об использовании паспорта в том, что мы можем получить
наш пользователь действительно легко, а не здесь
вместо того, чтобы передать наше имя, мы хотим
передать имя нашего пользователя, чтобы мы могли просто сказать,
здесь наш запрос точка имя пользователя точка и
запросить, что пользователь просто будет
фактический пользователь, который мы используем сейчас, если
мы сохраняем это, убедитесь, что мы вернемся к нашему
зарегистрировать страницу повторно зарегистрировать нашего пользователя и
мы хотим использовать именно эту электронную почту и
войдите, вы увидите, что имеет высокий W, который
is the name of the user that we
specified and that's the power of using
session with passport is request that
user is always going to be sent to the
user that's authenticated for that
moment but there's a big problem with
our application for example if we were
to just save this so that our user no
longer exists we can go to this index
page and it gives us an error because we
don't have a user and we can access this
information even if we're not logged in
but of course we don't want to allow non
logged in users to access this
information so let's work on protecting
all of our different routes for when
we're not logged in and to do this is
actually really simple let's just
minimize this so it's a little bit out
of the way and we just want to create a
new function this function is going to
be check authenticated and as function
is going to take a request response and
next this is essentially a middleware
function which is just going to take our
request and response and an X variable
that we call whenever we're done
finishing up our authentication here
would check authenticated and we want to
do is we just want to check if the users
authenticated so because of passport we
can you call a function on request which
is called is authenticated whoops
authenticated and this function is just
going to return true if there's a user
that's authenticated or false if there
is no user so if it returns true we can
just come in here and we just want to
return our call to next essentially
saying everything works just go on to
the next but if it returns false what we
want to do is we're gonna redirect the
user so we'll say response dot redirect
we don't a redirect them to the login
page
so now we can use this check
authenticated
go all the way up to here we have in our
app get and whatever we want to
authenticate we just put in this check
authenticated before our actual function
and this will get called first and if
for some reason there's a problem it'll
actually redirect the user to that home
page or the login page so now it's saved
that and if we just try to go to this
page you'll see immediately we get
redirected to login and again if we try
to go back to that it's going to
redirect us to our login page because
we're not logged in yet we want to do
the same thing for when we are logged in
so if we log in with a user we're just
going to register our same W user and
we're going to log them in we don't want
to allow them to go back to login for
example if I type in login I can go back
на страницу входа, хотя я
уже вошли в систему, поэтому мы хотим использовать
еще одна проверка, это будет
почти точно так же, чтобы мы могли прийти
здесь функция это будет
называется проверка не заверена это
собираюсь принять в запросе ответ
а дальше и внутри отсюда мы хотим
сделайте ту же проверку, чтобы увидеть, если наши пользователи
аутентифицированы, но если они
аутентифицированы мы хотим перенаправить их
так что мы собираемся сказать, Res точка перенаправления
упс пер Resirect и мы на
перенаправить их на домашнюю страницу так же, как
это он собирается перенаправить их обратно
эта панель и если по какой-то причине
они не аутентифицированы, мы просто хотим
продолжить разговор, так что теперь мы
может поставить эту проверку во всех
места, которые мы хотим проверить, чтобы увидеть, если
например, пользователи, не прошедшие проверку подлинности
мы не хотим разрешать пользователям переходить на
страницу входа, если они уже
аутентифицированы мы не хотим допустить
их войти, если они уже
аутентифицировался так же с регистрацией и
наконец, снова зарегистрироваться здесь все
из них мы хотим убедиться, что нет
пользователи вошли в систему, если они хотят получить доступ
эти разные повторы, так что теперь, если мы
зарегистрировать пользователя с помощью регистра make
уверен, что мы авторизируемся и пытаемся перейти
страница входа выберите тип слеш
URL нажал ввод, и вы видите, что мы
получить ошибку, так что давайте проверим
Функция, которую мы только что написали, и это выглядит как
здесь мы забыли положить в нашем возвращении
для одного перенаправления в пользователя теперь давайте
сказать, что мы вернемся все
путь к нашей зарегистрированной странице
упс, убедитесь, что имя WW же
пользователь, который мы использовали все это время
и мы войдем и теперь, если мы попытаемся перейти к
эта страница входа в систему
Вы видите, что перенаправляет нас обратно к этому
Страница панели инструментов, потому что мы уже
заверенные мы можем сделать то же самое
пытаясь перейти на нашу страницу регистрации
и снова он собирается перенаправить нас обратно
здесь к нашей приборной панели теперь самый последний
вещь, которую мы должны настроить, это наша
окончательный маршрут, который будет для
выход нашего пользователя, потому что прямо сейчас
у нас нет возможности выйти, мы просто
застрял на этой странице, поэтому нам нужно нажать на
удалить запрос, и это запрос на удаление
мы просто позвоним и выйдем
собираюсь взять наш типичный
запрос к сожалению запрос и ответ
переменные так же, как это и внутри
здесь все, что нам нужно сделать, это просто позвонить
запрос точки выхода из системы
так и тогда мы можем просто перенаправить
пользователь, поэтому мы можем просто сказать, точка запроса
перенаправить и мы просто хотим перенаправить
вернуться на страницу входа
эта функция выхода снова что-то
что паспорта устанавливают для нас
автоматически он очистит сеанс и
Выйдите из нашего пользователя и для того, чтобы позвонить
эта функция удаления мы не можем на самом деле
делать это прямо из HTML, что нам нужно
использовать это нам нужно использовать форму, и мы
нужно опубликовать, но так как удалить не
на самом деле поддерживается формами, мы можем только
использовать пост, нам нужно использовать еще один финал
библиотека, так что давайте перейдем и установить
эта библиотека NPM I, и это называется
переопределение метода и, по существу, что
это позволит нам сделать это на самом деле
переопределить наш метод, который мы используем и
поэтому вместо использования почты мы можем на самом деле
вызовите этот метод удаления здесь и сейчас
давайте прокрутить до самого верха
убедитесь, что мы включили эту библиотеку, чтобы мы
Можно сказать, что переопределение метода Const происходит
быть равным требованию метода над
красный, и мы хотим убедиться, что мы используем это
так сказать, AB использовать метод точки над красным и
вместо этого мы просим вас передать то, что
мы хотим, чтобы наш метод переопределения был в нашем
случай, когда мы просто будем использовать подчеркивание
метод это то, что мы собираемся передать
наш метод так, чтобы увидеть, что в
Пример давайте перейдем к нашему индексу здесь и
создать форму, это будет нашим
Форма выхода », так что действие только идет
быть косой
выйти и мы хотим убедиться, что здесь
что мы поставили знак вопроса и
метод подчеркивания, и это будет
равно удалить, так что это подчеркивание
метод - это то, что мы используем для переопределения
наш метод, который мы устанавливаем здесь, который
будет пост, поэтому мы собираемся
переопределить это с помощью удаления, чтобы внутри
нашего сервера здесь мы можем назвать это приложение
точка удалить, что у нас здесь вместо
Хост точка точка для выхода это просто
безопаснее, потому что вы всегда должны использовать
удалить, когда вы удаляете вещи так
теперь спустись сюда внутри нашей формы
все, что нам нужно сделать, это поставить одну кнопку
которая будет нашей кнопкой отправки
поэтому мы ставим тип отправки и вместо
отсюда мы можем просто поставить
текст выхода сейчас, если мы сохраним, что сделать
уверен, что мы регистрируем нашего пользователя, чтобы мы могли
поставить наше имя все те же вещи, которые
мы делали это все время, вы можете
скажем, у нас есть кнопка выхода и когда мы
нажмите, что, конечно, мы собираемся получить
ошибка, и это потому, что, как я вижу
мы ставим редирект точки запроса и это
должен быть ответ точка перенаправления, так что теперь
давайте попробуем это снова давайте удостоверимся, что мы
вернуться на нашу страницу зарегистрировать нашего пользователя
Войти все выглядит хорошо, и мы
нажмите кнопку выхода, и вы увидите, что это возвращает нас
на логин, потому что наши пользователи вошли
и мы больше не можем идти и
наша домашняя страница и, наконец, у нас есть
полностью работающее приложение для входа
Вы можете подключить к своему проекту вы
работая над, если вам понравилось видео сделать
обязательно посмотрите мои другие видео, связанные
здесь, а также подписаться на
канал для больше видео от меня
упрощение сети большое спасибо
для просмотра и хорошего дня.
